<template>
	<view class="">
		<u-sticky bgColor="#fff">
			<u-navbar :fixed="false" :placeholder="true" title="备件仓库列表" @leftClick="leftClick" bgColor="#0F53AC"
				leftIconColor="#fff">
			</u-navbar>
			<view class="help-pubuBox">
				<u-search placeholder="搜索备件名称" height="40" shape="square" color="#2B2B2B" v-model="title" @change="change"
					@search="chaxun()" @custom="chaxun()" :showAction="false"> 
				</u-search>
			</view>
			<view class="dropdown" v-if="showDropdown">
				<zb-dropdown-menu :zIndex="89" active-color="#0F53AC">
					<zb-dropdown-item :options="useOption" v-model="useValue" @change="(e)=>{handleSelect(e)}"
						name="first">
					</zb-dropdown-item>
				</zb-dropdown-menu>
			</view>
		</u-sticky>
		<!-- <view class="line8"></view> -->
		<view class="bj-list" v-for="(item,index) in listInfo" :key="index">
			<view class="bj-item">
				<view class="title">{{item.partNum}}{{item.partName}}</view>
				<view class="main-content">
					<view class="left-icon">
						<image v-if="item.picture" :src="item.picture"></image>
						<image style="width:136rpx;height: 136rpx;" v-else
							src="@/static/images/index/beijian.png" mode=""></image>
					</view>
					<view class="right-txt">
						<view class="txt-content">
							<view class="left">设备类型：</view>
							<view class="right">{{item.partTypeName}}</view>
						</view>
						<view class="txt-content">
							<view class="left">保质期：</view>
							<view class="right">{{item.qualityPeriod}}{{item.qualityUnit}}</view>
						</view>
						<view class="txt-content">
							<view class="left">实际库存：</view>
							<view class="right">{{item.realStock}}</view>
						</view>
						<!-- <view class="txt-content">
    					<view class="left">可用库存：</view>
    					<view class="right">{{item.availableStock}}</view>
    				</view> -->
						<view class="txt-content">
							<view class="left">备件库：</view>
							<view class="right">{{item.storehouseName}}</view>
						</view>

					</view>
				</view>
				<view class="item-btn" v-if="item.realStock>0">
					<view class="chuku" @click="togoChukuChange(item)">出库</view>
					<view class="su-line"></view>
					<view class="ruku" @click="togoRukuChange(item)">入库</view>
				</view>
				<view class="item-btn" v-if="item.realStock==0">
					<view class="ruku" @click="togoRukuChange(item)">入库</view>
				</view>
			</view>
			<!-- <view class="line8"></view> -->
		</view>
		<u-loadmore v-if="total>5" :status="status" :line="true" />
		<view class="empty-data" v-if="listInfo.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: '',
				actionStyle: {
					color: '#fff',
					background: '#0F53AC',
					padding: '10rpx',
					borderRadius: '8rpx'
				},
				showDropdown: true,
				useOption: [],
				useValue: '',
				page: 1,
				total: 0,
				params: {
					keyword: '',
					storehouseIds: [],
					pn: 1,
					ps: 5
				},
				status: 'loadmore',
				listInfo: [],
				warehouseList: [],
			}
		},
		onLoad() {
			this.getgradeList()
			this.getList()
		},
		//下拉加载更多
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			leftClick() {
				uni.switchTab({
					url: '/pages/work/index'
				})
			},
			change(v) {
				this.title = v
			},
			getList(){
				//调用接口查询
				uni.$u.http.post(`/device/mobile/devicePart/pageList`, this.params).then(res => {
					if (res.code == 0) {
						this.listInfo = this.listInfo.concat(res.data.records);
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {})
			},
			chaxun() {
				this.params.keyword = this.title
				this.params.pn = 1
				this.listInfo = [];
				this.getList()
			},
			//获取备件库
			getgradeList() {
				uni.$u.http.post(`/device/mobile/sysDataDictionary/dictionaryList`, {
					configType: "part_library"
				}).then(res => {
					if (res.code == 0) {
						this.warehouseList = res.data
						this.useOption = [{
							text: '全部',
							value: ''
						}];
						if (res.data && res.data.length > 0) {
							res.data.forEach(item => {
								let dd = {
									text: item.configValue,
									value: item.id
								}
								this.useOption.push(dd)
							})
							this.useValue = '';
						}
					}
				}).catch(err => {})
			},
			//入库
			togoRukuChange(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/stockList/ruku?items=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//出库
			togoChukuChange(item) {
				uni.navigateTo({
					url: '/pages/subPackagesB/stockList/chuku?items=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			handleSelect(val) {
				this.params.pn = 1
				this.params.storehouseIds = []
				this.warehouseList.forEach(item => {
					if (item.id == val.value) {
						if (item.children && item.children.length > 0) {
							item.children.forEach(i => {
								this.params.storehouseIds.push(i.id)
							})
						}
					}
				})
				if (val.value == '') {
					this.params.storehouseIds = [];
				}else{
					this.params.storehouseIds.push(val.value)
				}
				// if (val.value == '') {
				// 	this.params2.storehouseIds = [];
				// } else {
				// 	this.params2.storehouseIds = [val.value];
				// }
				this.listInfo = [];
				this.getList();
			},
		}
	}
</script>

<style lang="scss">
	.help-pubuBox {
		padding: 28rpx 32rpx;
		background: #fff;
		.u-input {
			background-color: #f2f2f2;
		}
	}

	.dropdown {
		border-top: 1px solid rgba(242, 242, 242, 1);
	}

	.bj-list {
		margin-top: 2rpx;
		background: #f2f2f2;
		border-top: 2rpx solid #F5F5F5;

		.bj-item {
			background: #fff;
			padding: 32rpx 32rpx 0 32rpx;
			// margin: 10rpx 0;

			.title {
				font-size: 16px;
				font-weight: 500;
				color: #2B2B2B;
			}

			.main-content {
				display: flex;
				margin-top: 14rpx;

				.left-icon {
					image {
						width: 136rpx;
						height: 136rpx;
						border-radius: 8rpx;
					}
				}

				.right-txt {
					padding-left: 32rpx;

					.txt-content {
						display: flex;
						color: #A6A6A6;
						font-size: 28rpx;
						margin-bottom: 10rpx;
						align-items: center;

						.right {
							color: #333333;
							padding-left: 4rpx;
						}
					}
				}
			}

			.item-btn {
				border-top: 1px solid #f2f2f2;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 24rpx 0;
				margin-top: 20rpx;

				.chuku {
					width: 45%;
					font-size: 34rpx;
					color: #8c8c8c;
					text-align: center;
				}

				.ruku {
					width: 45%;
					font-size: 34rpx;
					color: #0F53AC;
					text-align: center;
				}

				.su-line {
					width: 4rpx;
					height: 50rpx;
					background: #f2f2f2;
				}
			}
		}

		.bj-item:first-child {
			margin-top: 0;
		}

		.dropdown {
			.list2 {
				background: #fff;

				.sort {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #000000;
					padding: 20rpx 0;
				}
			}

			.sort-list {
				width: 100%;
				height: 200vh;
				background: #9d9d9d;
				position: absolute;
				z-index: 22;

				.sort-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10rpx 40rpx 10rpx 20rpx;
					font-size: 34rpx;
					border-bottom: 1px solid #f2f2f2;
					z-index: 99;
					position: relative;
					background: #fff;
				}

				.sort-item:last-child {
					border-bottom: none;
				}

				.sort-item:first-child {
					border-top: 1px solid #f2f2f2;
				}
			}
		}
	}
</style>
